<template>
	<div class="ComTable">
		<el-table ref="multipleTable" border :data="ComTable.tableData" tooltip-effect="dark" style="width: 100%"
		 @selection-change="handleSelectionChange" :header-row-class-name="ComTable.header" :row-class-name="ComTable.tableData.rowclass"
		 :class="ComTable.tableData.rowclass" :show-summary="ComTable.showsummary" >
			<template v-for="i in ComTable.title">
				<el-table-column v-if="i.type==='selection'" type="selection" :width="i.width">
				</el-table-column>
				<el-table-column v-else-if="i.type==='btn'" :label="i.label">
					<template slot-scope="scope">
						<div class="btn">
							<button type="button" v-for="b in i.btnlist" :style="{color:b.color}" @click="handleSelectionChange(b,scope.$index, scope.row)">
								{{b.text}}
							</button>
						</div>
					</template>
				</el-table-column>
				<el-table-column v-else-if="i.type==='list'" :label="i.label">
					<template slot-scope="scope">
						<div class="list" v-for="(prop,key,index) in scope.row[i.prop]" :key="index">
							{{prop}}
						</div>
					</template>
				</el-table-column>
				<el-table-column v-else :prop="i.prop" :label="i.label" :width="i.width">
				</el-table-column>
			</template>
		</el-table>
	</div>
</template>

<script>
	export default {
		props: ['ComTable'],
		name: "ComTable",
		data() {
			return {

			}
		},
		methods: {
			handleSelectionChange(b, index, row) {
				this.ComTable.multipleSelection = {
					btnlist: b,
					row: row
				};
				this.$emit("ComTablesondata", this.ComTable.multipleSelection)
			},
		}
	}
</script>

<style lang="less">
	.home-table {
		.ComTable {
			border: none;
			.el-checkbox__input.is-checked .el-checkbox__inner,
			.el-checkbox__input.is-indeterminate .el-checkbox__inner,
			.el-table__footer-wrapper td {
				background-color: #fff;
				border: none;
			}

			.el-table__row td {
				border-right: none;
			border-color: #bdbdbd;
			}

			.el-checkbox__inner {
				border: none;

			}

			.el-table tr {
				th {
					border: none;

				}
			}
		}
	}

	.ComTable {
		border: 1px solid #bdbdbd;

		.el-checkbox__input.is-checked .el-checkbox__inner,
		.el-checkbox__input.is-indeterminate .el-checkbox__inner,
		.el-table__footer-wrapper td {
			background-color: #fff;
			border-color: #bdbdbd;
		}

		.el-table__footer-wrapper td {
			color: #41c7db;
		}

		.el-checkbox__inner {

			border-color: #bdbdbd;
		}

		.el-table tr {
			th {
				border-color: #bdbdbd;
				text-align: center;

			}

			&.headerrow {
				th {
					background: #41c7db;
					color: #000;
				}
			}

			&.headercolor {
				th {
					color: #41c7db !important;
				}
			}

			&.header5f00ff {
				th {
					background: #5f00ff;
					color: #fff;
				}
			}
		}

		.el-table .successrow {
			background: #cfc;&:nth-of-type(2n) {
				background: #ffffcc;
			}
		}

		 .oneendrow {
			background: #ffffcc;
			&:nth-of-type(2n) {
				background: #cfc;
			}
		}

		.el-table .cell-row {
			background: #fff !important;
		}

		.el-table .cell,
		.el-table th div,
		.el-table--border td:first-child .cell,
		.el-table--border th:first-child .cell {
			padding: 0;
			text-align: center;
		}

		.el-table__row {

			td {
				border-color: #cdcdcd;
				text-align: center;
			}
		}

		.list {
			width: 100%;
			padding: 12px 0;
			box-sizing: border-box;
			border-bottom: 1px solid #cdcdcd;

			&:first-child {
				padding-top: 0;
			}

			&:last-child {
				padding-bottom: 0;
				border-bottom: 0;
			}
		}

		.btn {
			button {
				margin: 0;
				background: #43c8db;
				width: 65px;
				height: 20px;
				line-height: 20px;
				padding: 0;
				border: none;
				border-radius: 5px;
				color: #fff;

				&:nth-of-type(1) {
					margin-bottom: 5px;
				}

				&:nth-of-type(2) {
					margin-bottom: 5px;
				}

				&:nth-of-type(3) {}
			}
		}
	}
</style>
